<template>
  <Panel>
    <template v-slot:header>商品列表</template>
    <template v-slot:con>
      <div>
        <el-table :data="tableData" style="width: 100%" size="mini">
          <el-table-column type="expand">
            <template v-slot="{ row }">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 销量">
                  <span>{{ row.sellCount }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ row.category }}</span>
                </el-form-item>
                <el-form-item label="商品图片" label-width="100%">
                  <img :src="baseUrl + row.imgUrl" width="120px" />
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ row.goodsDesc }}</span>
                </el-form-item>
                <el-form-item label="商品创建时间">
                  <span>{{ row.ctime }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品 ID" prop="id" width="80px">
          </el-table-column>
          <el-table-column label="商品名称" prop="name" width="250px">
          </el-table-column>
          <el-table-column label="所属分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price" width="80px">
          </el-table-column>
          <el-table-column label="商品图片">
            <template v-slot="{ row }">
              <img :src="baseUrl + row.imgUrl" width="80px"
            /></template>
          </el-table-column>

          <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                @click="
                  $router.push({ path: '/pro/edit', query: { id: row.id } })
                "
                >编辑</el-button
              >
              <el-button type="danger" @click="delpro(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </Panel>
</template>

<script>
import { getproList, delPro } from "../../api/pro.js";
export default {
  created() {
    this.getprolist();
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
      total: 0,
      baseUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/",
      tableData: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getprolist();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getprolist();
    },
    async getprolist() {
      const { data, total } = await getproList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = data;
      this.total = total;
    },
    //  商品删除
    delpro(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await delPro({
            id,
          });
          if (data.code === 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getprolist();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-pagination {
  margin: 20px 0;
}
/deep/.paner-con {
  padding: 20px;
}
</style>